<template>
  <v-form ref="form">
    <v-row class="align-center line" no-gutters>
      <v-col :cols="6">
        <v-row no-gutters>
          <v-col cols="4" class="label-wrap">
            <span>Project Name</span>
          </v-col>
          <v-col class="text-left" cols="8">
            <v-text-field
              v-model="propInfo.projectName"
              v-validate="'required'"
              name="Project Name"
              class="gray-input"
              dense
              hide-details
              label="Enter project name"
              required
              solo
            ></v-text-field>
            <span class="vee-validate-error">
              {{ errors.first("Project Name") }}
            </span>
          </v-col>
        </v-row>
      </v-col>
      <v-col :cols="5" offset="1">
        <v-row no-gutters>
          <v-col cols="3" class="label-wrap">
            <span>Priority</span>
          </v-col>
          <v-col class="text-left" cols="5">
            <v-select
              v-model="propInfo.priority"
              :items="priorityItems"
              v-validate="'required'"
              name="Priority"
              class="gray-input"
              dense
              hide-details
              required
              solo
            ></v-select>
            <span class="vee-validate-error">
              {{ errors.first("Priority") }}
            </span>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label-wrap" :cols="2">
        <span>Project Type</span>
      </v-col>
      <v-col class="text-left" :cols="4">
        <v-text-field
          v-model="propInfo.projectType"
          v-validate="'required'"
          name="Project Type"
          class="gray-input"
          dense
          hide-details
          label="Enter project type"
          required
          solo
        ></v-text-field>
        <span class="vee-validate-error">
          {{ errors.first("Project Type") }}
        </span>
      </v-col>
    </v-row>
    <v-row class="line align-start" no-gutters>
      <v-col class="label-wrap" :cols="2">
        <span>Project Description</span>
      </v-col>
      <v-col class="text-left" :cols="9">
        <v-textarea
          v-model="propInfo.projectDescription"
          v-validate="'required'"
          name="Project Description"
          class="gray-input"
          height="52"
          dense
          hide-details
          label="Enter the project description"
          required
          solo
          no-resize
        ></v-textarea>
        <span class="vee-validate-error">
          {{ errors.first("Project Description") }}
        </span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label-wrap" :cols="2">
        <span>Project Location</span>
      </v-col>
      <v-col class="text-left" :cols="9">
        <v-text-field
          v-model="propInfo.projectLocation"
          v-validate="'required'"
          name="Project Location"
          class="gray-input"
          dense
          hide-details
          label="Enter location"
          required
          solo
        ></v-text-field>
        <span class="vee-validate-error">
          {{ errors.first("Project Location") }}
        </span>
      </v-col>
      <v-col class="flex-grow-0 ml-2">
        <v-icon> mdi-map-marker </v-icon>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col class="label-wrap" :cols="2">
        <span>Service Provider</span>
      </v-col>
      <v-col class="text-left" :cols="4">
        <v-text-field
          v-model="propInfo.serviceProvider"
          v-validate="'required'"
          name="Service Provider"
          class="gray-input"
          dense
          hide-details
          label="Enter service provider"
          required
          solo
        ></v-text-field>
        <span class="vee-validate-error">
          {{ errors.first("Service Provider") }}
        </span>
      </v-col>
    </v-row>
    <v-row class="line" no-gutters>
      <v-col :cols="2" class="label-wrap">
        <span>Start Date</span>
      </v-col>
      <v-col class="text-left" :cols="3">
        <v-card flat width="70%">
          <PickerInput
            v-model="propInfo.startDate"
            v-validate="'required'"
            name="Start Date"
            :max="propInfo.endDate"
            placeholder="Select Start Date"
            hide-details
          ></PickerInput>
        </v-card>
        <span class="vee-validate-error">
          {{ errors.first("Start Date") }}
        </span>
      </v-col>
      <v-col :cols="1" class="label-wrap">
        <span>End Date</span>
      </v-col>
      <v-col class="text-left" :cols="3">
        <v-card flat width="70%">
          <PickerInput
            v-model="propInfo.endDate"
            v-validate="'required'"
            name="End Date"
            :min="propInfo.startDate"
            placeholder="Select End Date"
            hide-details
          ></PickerInput>
        </v-card>
        <span class="vee-validate-error">
          {{ errors.first("End Date") }}
        </span>
      </v-col>
    </v-row>
  </v-form>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import PickerInput from "@/components/Maintenance/PickerInput/PickerInput.vue";
@Component({
  components: {
    PickerInput,
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
})
export default class ProjectDetails extends Vue {
  get propInfo() {
    return this.$props.info;
  }
  //project details data origin
  priorityItems = ["Low", "Middle", "High"];
}
</script>
<style lang="scss"></style>
